<template>
  <transition name="slide">
    <div class="modal">
      <!-- 这是弹窗组件 -->
      <!-- 遮罩 -->
      <div class="mask"></div>
      <!-- 弹窗内容 -->
      <div class="box">
        <!-- 标题 -->
        <div class="title">{{ title }}</div>
        <!-- 信息提示栏 -->
        <div class="msg">
          <slot name="body"></slot>
        </div>
        <!-- 按钮栏 -->
        <div class="btn" v-if="btnType == 1">
          <!-- 当点击查看购物车 跳转页面 -->
          <button @click="$emit('submit')">查看购物车</button>
          <!-- 当点击继续购物 关闭弹窗 -->
          <button @click="$emit('cancel')">继续购物</button>
        </div>

        <div class="btn" v-if="btnType == 2">
          <!-- 当点击查看购物车 跳转页面 -->
          <button @click="$emit('submit')">确定订单</button>
          <!-- 当点击继续购物 关闭弹窗 -->
          <button @click="$emit('cancel')">取消订单</button>
        </div>
        <div class="btn" v-if="btnType == 3">
          <!-- 当点击查看购物车 跳转页面 -->
          <button @click="$emit('submit')">确定</button>
          <!-- 当点击继续购物 关闭弹窗 -->
          <button @click="$emit('cancel')">取消</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    btnType: {
      type: Number,
      default: "",
    },
  },
  methods: {
    // goback() {
    //   this.$emit("keepShopping");
    // },
    // gotoCart() {
    //   this.$router.push("/card");
    // },
  },
};
</script>

<style scoped lang="scss" scoped>
.modal {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 50%;
  top: 50%;

  margin-left: -150px;
  margin-top: -150px;
  z-index: 999;
  transition: all 0.2s;
  &.slide-enter-active {
    top: -200%;
  }
  &.slide-leave-active {
    left: 150%;
  }
  &.slide-enter {
    left: 150%;
  }
}
.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgb(0, 0, 0, 0.5);
  z-index: 999;
}
.box {
  width: 400px;
  // height: 300px;
  background: #fff;
  position: absolute;
  z-index: 999;
  border-radius: 10px;
  .title {
    width: 100%;
    line-height: 100px;
    font-size: 20px;
    text-align: center;
  }
  .msg {
    width: 100%;
    line-height: 80px;
    font-size: 20px;
    text-align: center;
  }
  .btn {
    width: 100%;
    line-height: 150px;
    text-align: center;
    button {
      width: 100px;
      height: 30px;
      text-align: center;
      margin: 0 50px;
      border: none;
      background: skyblue;
      border-radius: 18px;
    }
  }
}
</style>